<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>意见领袖活动</title>
    <link rel="stylesheet" href="https://res.wx.qq.com/open/libs/weui/1.1.2/weui.min.css">
    <link rel="stylesheet" href="css/common.css">
    <link rel="stylesheet" href="//at.alicdn.com/t/font_60260_57qapec7452ep14i.css">
    <meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
<div class="weui-tab" id="tab">
    <div class="weui-tabbar">
        <div class="weui-navbar__item">
            我要推荐
        </div>
        <div class="weui-navbar__item">
            影响力排行榜
        </div>
        <div class="weui-navbar__item">
            活动规则
        </div>
    </div>
    <div class="weui-tab__panel">
        <div class="weui-tab__content tab-content-one">
            <div class="index-head">
                <img src="./img/header.png" alt="意见领袖活动" style="width: 100%">
            </div>
            <div class="index-btn-group">
                <img src="./img/recommend.png" alt="我要推荐" @click="recommend" style="width: 45%;display: inline-block;">
                <img src="./img/share.png" alt="我要分享" @click="share" style="width: 45%;display: inline-block;">
            </div>
            <div class="index-recommend-msg">
                <p class="index-recommend-introduction">活动简介</p>
                <p class="index-recommend-text">
                    推荐您身边的代理会计使用亿企代税或亿企代账，即可获得10元/人的现金奖励。推荐后使用的人数越多，奖励金额越多，更有机会成为税友的意见领袖，享受更多金牌伙伴的福利。
                </p>
            </div>
            <p class="index-phone">咨询热线：95105102转4</p>
            <div @click="addQQ" class="index-QQ">
                <p>点击加入活动QQ群：312797848 </p>
            </div>
            <div style="height: 20px"></div>
        </div>
        <div class="weui-tab__content" style="height: 100%;">
            <div class="rank-head">
                <img src="./img/rank.png" alt="排行榜" style="height: 100%;display: inline-block">
            </div>
            <div class="rank-myRank">
                <div class="rank-first">
                    <img :src="headImgUrl" alt="">
                    <div>{{ nickName }}</div>
                </div>
                <div class="rank-other">
                    <p>我的排名</p>
                    <span>{{ rankingNo }}</span>
                </div>
                <div class="rank-other">
                    <p>已推荐（人）</p>
                    <span>{{ influenceNum }}</span>
                </div>
            </div>
            <div id="list" class="height rank-others">
                <ul class="ul" style="height: 100%;color: #8f7c54;">
                    <li v-for="rank in ranks" style="height: 17%;text-align: center;vertical-align: top">
                        <div class="rank-123" v-if="rank.rankingNo === 1" v-html="rankHTML1"></div>
                        <div class="rank-123" v-else-if="rank.rankingNo === 2" v-html="rankHTML2"></div>
                        <div class="rank-123" v-else-if="rank.rankingNo === 3" v-html="rankHTML3"></div>
                        <div class="rank-123" v-else v-html="'第' + rank.rankingNo + '名'"></div>
                        <img class="rank-others-img" :src="rank.headImgUrl" alt="">
                        <div class="rank-others-rank"><p style="width: 90px;text-overflow:ellipsis">{{ rank.nickName
                            }}</p></div>
                        <div class="rank-others-recommend">已推荐{{ rank.influenceNum }}人</div>
                    </li>
                </ul>
            </div>
            <div class="rank-allRank">
                <div class="rank-all" style="padding-left: 10%">参与人数：{{ leadersNum }}</div>
                <div class="rank-all">总推荐人数：{{ presenteesNum }}</div>
            </div>
        </div>
        <div class="weui-tab__content tab-content-one">
            <img src="./img/role.png" alt="" style="width:100%;">
            <div class="rule-text">
                <div class="rule-title">
                    活动规则
                </div>
                <div style="padding: 20px;font-size: 13px;color:#8f7c54;">
                    <p>1、被推荐人的手机号须为“将被用作或已经用作”代税或代账注册手机号;</p>
                    <p>2、被推荐人必须为代理会计，记账或报税不少于5户;</p>
                    <p>3、企业推荐人数不少于2人，否则参与无效被推荐后，以手机号采集为准，使用代税或代账连续为两个月;</p>
                </div>
            </div>
            <div style="color:#fff9cf;font-weight: 900;margin-top: -17%;text-align: center">
                <div class="rule-line" style="margin: 0 -8px 6px 0;"></div>
                <div class="rule-dot"></div>
                <div style="display: inline-block">奖品设置</div>
                <div class="rule-dot"></div>
                <div class="rule-line" style="margin: 0 0 6px -8px;"></div>
            </div>
            <div style="clear: both"></div>
            <div class="rule">
                <div class="rule-reward" style="margin-left: 5px">
                    <div class="rule-reward-title" v-html="rankHTML4"></div>
                    <p class="prize-title">奖品：</p>
                    <p>亿企代账至少一年免费使用资格。</p>
                    <p class="prize-title">获奖资格：</p>
                    <p>推荐排行榜前20名</p></div>
                <div class="rule-reward" style="width: 31%">
                    <div class="rule-reward-title" v-html="rankHTML5"></div>
                    <p class="prize-title">奖品：</p>
                    <p>10元/人/次的红包</p>
                    <p>所有推荐要求的。</p>
                    <p class="prize-title">获奖资格：</p>
                    <p>每位被推荐人连续使用两个月代税或代账，每位只统计1次</p>
                </div>
                <div class="rule-reward">
                    <div class="rule-reward-title" v-html="rankHTML6"></div>
                    <p class="prize-title">奖品：</p>
                    <p>与税友签订意见领袖合作协议。</p>
                    <p class="prize-title">获奖资格：</p>
                    <p>综合推荐与使用排名前50名</p>
                </div>
            </div>
        </div>
    </div>
</div>
<script src="//res.wx.qq.com/open/js/jweixin-1.2.0.js"></script>
<script src="./lib/jQuery/jquery-3.2.1.min.js"></script>
<script type="text/javascript" src="lib/weui/weui.js"></script>
<script src="./lib/vue/vue.js"></script>
<script src="./js/api.js"></script>
<script src="./js/index.js"></script>
</body>
</html>